<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>我的-个人认证</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        html,
        body {
            background: #fff;
        }
        .app {
            background: #f7f7f7;
        }
        .disable {
            pointer-events: none
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="lineGrey"></div>
        <div class="bgf wd-sjrz" style="margin-bottom: 1rem;" :class="{disable:isLook}">
             <!--  <div class="title" style="margin-bottom: .16rem;padding-top: .16rem;">请拍摄并上传您的身份证正反面</div>
          <div class="id-person flex-x-sb">
                <div>
                    <img :src="IdCardObverseSide" alt="" @click="uploadIdCard(0)">
                    <div>身份证正面</div>
                </div>
                <div>
                    <img :src="IdCardReverseSide" alt="" @click="uploadIdCard(1)">
                    <div>身份证反面</div>
                </div>
            </div> -->
            <div class="yyzz-detail">
                <div class="yyzz-detail-item flex-x-sb">
                    <div class="flex-x-s">
                        <div class="title">姓名</div>
                        <input type="text" placeholder="请输入真实姓名" v-model="formLabel.realNameLabel">
                    </div>
                </div>
                <div class="yyzz-detail-item flex-x-sb">
                    <div class="flex-x-s">
                        <div class="title">性别</div>
                        <div class="sex flex-x-s" style="width: 100%" v-if="!isLook">
                            <div @click="doSex(1)" :class="{active:formLabel.sexLabel === 1}">男</div>
                            <div @click="doSex(0)" :class="{active:formLabel.sexLabel === 0}">女</div>
                        </div>
                        <div style="width: 100%" v-if="isLook">
                            <input type="text" v-if="formLabel.sexLabel === 0" value="女">
                            <input type="text" v-if="formLabel.sexLabel === 1" value="男">
                        </div>
                    </div>
                </div>
                <div class="yyzz-detail-item flex-x-sb">
                    <div class="flex-x-s">
                        <div class="title">证件号</div>
                        <input type="text" placeholder="请输入有效身份证号" maxlength="18" v-model="formLabel.idNumberLabel">
                    </div>
                </div>
                <div class="yyzz-detail-item flex-x-sb" v-show = "false">
                    <div class="flex-x-s">
                        <div class="title">店铺名称</div>
                        <input type="text" placeholder="请输入店铺名称" v-model="formLabel.shopNameLabel">
                    </div>
                </div>
                <div class="yyzz-detail-item flex-x-sb" v-show = "false" v-for="(item,index) in formLabel.contactsLabel" :key="index">
                    <div class="flex-x-s">
                        <div class="title">{{index == 0? '联系电话':''}}</div>
                        <input type="tel" placeholder="请输入联系电话" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')" v-model="formLabel.contactsLabel[index]">
                    </div>
                    <div v-if="index == formLabel.contactsLabel.length-1 && index != 2 && !isLook">
                        <img @click="addPhone" src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/add.png" alt="">
                    </div>
                    <div v-if="formLabel.contactsLabel.length > 1 && !isLook">
                        <img @click="delPhone(index)" src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/sub.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="wd-yyzz-submit flex-x-c" @click="submitAuthorization" v-show="isSubmit">
            <div>
                提交认证
            </div>
        </div>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/jsencrypt.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script>
        apiready = function() {
            vm = new Vue({
                el: '.app',
                data: {
                    IdCardObverseSide: "https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/id_before.png",
                    IdCardReverseSide: "https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/id_after.png",
                    formLabel: {
                        realNameLabel: '',
                        idNumberLabel: '',
                        shopNameLabel: '',
                        sexLabel: '',
                        contactsLabel: ['']
                    },
                    isSubmit: false,
                    isLook: true
                },
                mounted: function() {
                    var vm = this
                    this.getAuthorizationStatus()
                    this.getAuthorizationDetail()
                    doSoftInput(vm)
                },
                methods: {

                    getAuthorizationStatus() {
                        let vm = this
                        mime("getAuthorizationStatus")(function(ret) {
                            console.log("@@:" + JSON.stringify(ret))
                            if (ret.data.personal === -1 || ret.data.personal === 2){
                                vm.isSubmit = true
                                vm.isLook = false
                            }
                        })
                    },


                    checkParam: function(objPublish){

                    },

                    submitAuthorization() {
                        let vm = this
                        let phones = []
                        // if (vm.IdCardObverseSide === 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/id_before.png' ||
                        //     vm.IdCardReverseSide === 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/id_after.png') {
                        //     toastMiddle("请上传身份证正反面！")
                        //     return false
                        // }
                        if (!vm.formLabel.realNameLabel) {
                            toastMiddle("请填写姓名！")
                            return false
                        }
                        if (vm.formLabel.sexLabel !== 0 && vm.formLabel.sexLabel !== 1) {
                            toastMiddle("请选择性别！")
                            return false
                        }
                        if (!vm.formLabel.idNumberLabel) {
                            toastMiddle("请填写身份证号码！")
                            return false
                        }
                        // if (!vm.formLabel.shopNameLabel) {
                        //     toastMiddle("请填写店铺名称！")
                        //     return false
                        // }
                        // if (!vm.formLabel.contactsLabel || (vm.formLabel.contactsLabel && vm.formLabel.contactsLabel.length <= 0)) {
                        //     toastMiddle("请至少填写一个联系电话！")
                        //     return false
                        // } else {
                        //     for (let i = 0; i < vm.formLabel.contactsLabel.length; i++) {
                        //         let item = vm.formLabel.contactsLabel[i]
                        //         if (item == '') {
                        //            if(i == 0){
                        //                 toastMiddle('您还没有填写电话号码！')
                        //                 return false;
                        //            }
                        //         }else{
                        //             if (!(/^1[3456789]\d{9}$/.test(item))) {
                        //                 toastMiddle('请输入正确的手机号！')
                        //                 return false;
                        //             }else {
                        //                 phones.push(item)
                        //             }
                        //         }
                        //     }
                        // }
                        const param = {
                            certificationType: "PERSONAL",
                            licenseNumber: vm.formLabel.idNumberLabel,
                            name: vm.formLabel.realNameLabel,
                            // phones: vm.formLabel.contactsLabel,
                            sex: vm.formLabel.sexLabel,
                            // shopName: vm.formLabel.shopNameLabel
                        }
                        fnPost(interfaces.USER_MODULE.AUTHORIZATION.MY_AUTHORIZATION, param, function(ret, err) {
                            if (ret && ret.code === RESPONSE_OK) {
                                api.sendEvent({name: "updateShopStatus"})
                                api.alert({title: '上传成功,等待管理员审核',}, () => {
                                    api.closeWin()
                                });
                            } else {
                                toastMiddle(ret ? ret.msg : '');
                            }

                        })
                    },
                    // 获取个人认证和商家认证的状态
                    getAuthorizationDetail() {
                        let vm = this
                        mime("getAuthorizationDetail")("PERSONAL", function(ret) {
                            if (ret.data) {
                                vm.formLabel.realNameLabel = ret.data.name
                                // vm.formLabel.realNameLabel = decryptAuth(ret.data.name)
                                // vm.formLabel.shopNameLabel = ret.data.shopName
                                // vm.formLabel.contactsLabel = ret.data.contacts
                                vm.formLabel.idNumberLabel = ret.data.ident
                                // vm.formLabel.idNumberLabel = decryptAuth(ret.data.ident)
                                // vm.IdCardObverseSide = decryptAuth(ret.data.enIdentFrontUrl)
                                //vm.IdCardObverseSide = ret.data.enIdentFrontUrl
                                // vm.IdCardReverseSide = decryptAuth(ret.data.enIdentBackUrl)
                                //vm.IdCardReverseSide = ret.data.enIdentBackUrl
                                vm.formLabel.sexLabel = ret.data.sex
                            }
                        })
                    },

                    delPhone: function(index){
                        this.formLabel.contactsLabel.splice(index,1)
                    },

                    addPhone: function() {
                        if (this.formLabel.contactsLabel.length > 2) {
                            return
                        }
                        if (!this.formLabel.contactsLabel[this.formLabel.contactsLabel.length - 1]){
                            toastMiddle('您还没有填写电话号码！');
                            return;
                        }
                        this.formLabel.contactsLabel.push('')
                    },
                    back() {
                        api.closeWin();
                    },
                    doSex(val) {
                        this.formLabel.sexLabel = val
                    },
                    uploadIdCard(index) {
                        let vm = this
                        var params = {
                            imageType: "FRONT"
                        }
                        if (index == 1) {
                            params.imageType = "BACK"
                        }
                        uploadIDCardImg(function(ret) {
                            if (ret && ret.code === RESPONSE_OK && ret.data) {
                                const resourceInfo = ret.data;
                                if (!resourceInfo.object) {
                                    toastMiddle("身份证识别失败")
                                    return false
                                }
                                if (index === 0) {
                                    if (!resourceInfo.object.name || !resourceInfo.object.idNum) {
                                        toastMiddle("身份证识别失败")
                                        return false
                                    }
                                    vm.IdCardObverseSide = resourceInfo.imgPath
                                    vm.formLabel.realNameLabel = resourceInfo.object.name
                                    vm.formLabel.idNumberLabel = resourceInfo.object.idNum
                                    if (resourceInfo.object.sex) {
                                        if (resourceInfo.object.sex === "女")
                                            vm.formLabel.sexLabel = 0
                                        if (resourceInfo.object.sex === "男")
                                            vm.formLabel.sexLabel = 1
                                    }
                                } else {
                                    if (!resourceInfo.object.authority) {
                                        toastMiddle("身份证识别失败")
                                        return false
                                    }
                                    vm.IdCardReverseSide = resourceInfo.imgPath
                                }
                                console.log(vm.IdCardObverseSide)
                            } else {
                                toastMiddle("身份证识别失败");
                            }
                        }, params);
                    }
                },
            })
        }
    </script>
</body>

</html>
